<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
import { useLoginedStore } from '@/stores/logined';
const loginedStore = useLoginedStore();
// 通过 loginedStore 中的 getter 来获取已经登录用户信息
const loginedUser = loginedStore.user;
console.log(loginedUser);

const logout = () => {
    loginedStore.remove();
    router.push('/login');
}

const open = ref(false);

</script>

<template>
    <a-layout>
      <a-layout-header class="header">
        <a-flex>
          <div class="logo">LOGO</div>
          <div class="status">
            欢迎
            <router-link :to="'/home/detail/' + loginedUser.id ">
              {{ loginedUser.nickname }}
            </router-link>
            <a-divider type="vertical" />
            <a href="#" @click="open=true">修改密码</a>
            <a-divider type="vertical" />
            <a href="#" @click="logout">退出</a>
          </div>
        </a-flex>
      </a-layout-header>
      <a-layout>
        <a-layout-sider class="sider" theme="light">
            <!-- 用来展示导航菜单组件 -->
            <router-view name="sider"></router-view>
        </a-layout-sider>
        <a-layout-content class="content">
            <!-- 用来展示用户点击导航菜单后对应的组件 -->
            <router-view name="content"></router-view>
        </a-layout-content>
      </a-layout>
      <a-layout-footer class="footer">
        &copy;2025 XX小组版权所有
      </a-layout-footer>
    </a-layout>
    <!-- 用来修改密码的窗口 -->
    <a-modal v-model:open="open" title="修改密码" cancelText="取消" okText="确定">
        需要提供被修改用户的 id 、需要提供 原密码、输入新密码、确认行密码
    </a-modal>
</template>

<style scoped>
.header {
    height: 10vh;
    background: #fff;
    border-bottom: 1px solid gray;
}

.logo {
  width: 25%;
}
.status {
  width: 75%;
  text-align: right
}

.sider {
    height: 80vh;
    background: #fff;
    border-right: 1px solid gray;
}

.content {
    background: #fff;
    height: 80vh;
}

.footer {
    background: #fff;
    height: 10vh;
    border-top: 1px solid gray;
}
</style>